<template>
  <div id='main' :style='styles'></div>
</template>
<script>
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legendScroll'
export default {
  props: {
    option: { // echart 配置参数
      type: Object,
      default: function () {
        return {}
      },
      required: true
    },
    styles: { // echart 配置参数
      type: Object,
      default: function () {
        return {}
      },
      required: true
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    console.log(this.option, 'option', this.styles)
    var myChart = echarts.init(document.getElementById('main'))
    // 指定图表的配置项和数据
    var option = this.option
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  destroyed () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
</style>

